<template>
  <div :class="active?'active':''" class="conversation-item">
    <div class="item-photo-block">
      <img @error="handleImageError" :src="setConversationAvatar" alt="" class="photo">
<!--      <div v-if="conversation.unreadCount > 0" class="unread-num">{{conversation.unreadCount > 99?'99+':conversation.unreadCount}}</div>-->
      <div v-if="conversation.unreadCount > 0" class="unread-num"></div>
    </div>
    <div class="item-info">
      <div class="name-block">
        <div class="name">{{conversationName}}</div>
        <div class="last-time">{{timeago}}</div>
      </div>
      <div class="abstract-block">
        <div class="abstract">{{messageForShow}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {caculateTimeago} from "@/utils/im";
export default {
  name: "ConversationItem",
  props:{
    conversation:{
      type:Object
    },
    active:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return{
      conversationName:'',
      setConversationAvatar:'',
      timeago:'',
    }
  },
  computed:{
    messageForShow(){
      const lastMessage=this.conversation.lastMessage;
      if(lastMessage.type==='TIMCustomElem'){
        switch (lastMessage.payload.data){
          case 'exchangePhone':
            return '【交换电话请求】';
          case 'sendResume':
            return '【发送个人简历请求】';
          case 'getResume':
            return '【获取个人简历请求】';
          case 'resume':
            return '【个人简历】';
          case 'invited':
            return '面试邀请【请在小程序端查看】';
        }
      }
      return lastMessage.messageForShow
    }
  },
  watch:{
    conversation: {
      handler: function(conversation) {
        this.conversationName=this.getConversationName(conversation),
        this.setConversationAvatar=this.setConversationAvatarHandler(conversation),
        this.timeago=caculateTimeago(conversation.lastMessage.lastTime * 1000)
        this.$updateTimeago(conversation);
      },
      immediate: true,
      deep: true
    }
  },
  methods:{
    //如果无头像设置默认头像
    setConversationAvatarHandler(conversation) {
      if (conversation.type === '@TIM#SYSTEM') {
        return 'https://web.sdk.qcloud.com/component/TUIKit/assets/system.png';
      }

      if (conversation.type === 'C2C') {
        return conversation.userProfile.avatar || 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png';
      }

      if (conversation.type === 'GROUP') {
        return conversation.groupProfile.avatar || '@/assets/images/im/gruopavatar.svg';
      }
    },
    //如果头像地址加载失败设置默认头像
    handleImageError() {
      this.setConversationAvatar='@/assets/images/im/gruopavatar.svg'
    },
    // 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID
    getConversationName(conversation) {
      if (conversation.type === '@TIM#SYSTEM') {
        return '系统通知';
      }

      if (conversation.type === 'C2C') {
        return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID;
      }

      if (conversation.type === 'GROUP') {
        return conversation.groupProfile.name || conversation.groupProfile.groupID;
      }
    },
    $updateTimeago(conversation) {
      if (conversation.conversationID) {
        // conversation.lastMessage.timeago = caculateTimeago(conversation.lastMessage.lastTime * 1000);
        conversation.lastMessage.messageForShow = conversation.lastMessage.messageForShow.slice(0, 15);
      }
      this.conversation=conversation
    },
  }
}
</script>

<style lang="scss" scoped>
.conversation-item.active{
  background: #fff;
}
.conversation-item{
  width: 100%;
  height: 65px;
  display: flex;
  flex-direction: row;
  padding: 10px;
  .item-photo-block{
    position: relative;
    width: 45px;
    height: 45px;
    margin-right: 10px;
    .photo{
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
    .unread-num{
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: -5px;
      right: -5px;
      background: red;
      color: #fff;
      font-size: 12px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      //transform: scale(0.7);
    }
  }
  .item-info{
    width: calc(100% - 55px);
    height: 100%;
    display: flex;
    flex-direction: column;
    .name-block,.abstract-block{
      height: 50%;
    }
    .name-block{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      .name{
        flex: none;
        width:calc(100% - 60px);
        font-size: 16px;
        font-weight: bold;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .last-time{
        width: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: $midGray;
        font-size: 12px;
      }
    }
    .abstract-block{
      display: flex;
      align-items: center;
      .abstract{
        width: 100%;
        color: $darkGray;
        font-size: 14px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
